import React, { Component } from 'react';
import '../assets/css/dashboard.css'
import { Layout, Menu, message, Modal } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
} from '@ant-design/icons';
import axios from '../http/axios'
import url from '../config/url'
import Checklogin from '../hoc/CheckLogin';
// 导入菜单组件
import { Link } from "react-router-dom"
import Adminrouter from '../router/AdminRouter'
const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu
class Dashboard extends Component {
    state = {
        collapsed: false,
        // 管理员信息
        info: {
            // 需要给更深层次的数据默认值，防止因为ajax异步请求时差而导致的报错
            last_login_addr: {}
        }
    };

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };

    //以单独的成员属性方式取存储acl
    acl = JSON.parse(sessionStorage.getItem('acl'))
    defaultOpenKeys = [this.props.location.pathname.split("/").splice(0, 3).join("/")]
    defaultSelectedKeys = [this.props.location.pathname]
    render() {
        return (
            <Layout id='layout'>
                <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
                    <div className="logo" />
                    <Menu theme="dark" mode="inline" defaultSelectedKeys={this.defaultSelectedKeys} defaultOpenKeys={this.defaultOpenKeys}>
                        {
                            this.acl.map(item => {
                                if (item.children.length === 0) {
                                    return <Menu.Item key={item.auth_path}>
                                        <Link to={item.auth_path}>{item.auth_name}</Link>
                                    </Menu.Item>
                                } else {
                                    return <SubMenu key={item.auth_path} title={item.auth_name}>
                                        {item.children.map(child => {
                                            if (child.is_nav) {
                                                return <Menu.Item key={child.auth_path}><Link to={child.auth_path}>{child.auth_name}</Link></Menu.Item>
                                            }
                                        })}
                                    </SubMenu>
                                }
                            })
                        }
                    </Menu>
                </Sider>
                <Layout className="site-layout">
                    <Header className="site-layout-background" style={{ padding: 0 }}>
                        {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                            className: 'trigger',
                            onClick: this.toggle,
                        })}
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        你好{this.state.info.username}， 欢迎登录。您上次于&nbsp;&nbsp;{this.state.info.last_login_addr.state}/{this.state.info.last_login_addr.isp}地（IP：{this.state.info.last_ip}）登录! &nbsp;&nbsp;&nbsp; <span style={{ color: 'red', cursor: 'pointer' }} onClick={this.lagout}>[注销登录]</span>
                    </Header>
                    <Content
                        className="site-layout-background"
                        style={{
                            margin: '24px 16px',
                            padding: 24,
                            minHeight: 280,
                        }}
                    >
                        {/* 嵌套路由，用于显示后台的所有的组件 */}
                        <Adminrouter />
                    </Content>
                </Layout>
            </Layout>
        );
    }
    componentDidMount() {
        // 发送发送请求获取管理员信息
        axios.get(url.AdminInfo).then(res => {
            if (res.data.errNo === 0) {
                const info = res.data.accountInfo
                this.setState({ info })
            }
        })
    }
    // 注销登录
    lagout = () => {
        Modal.confirm({
            icon: <ExclamationCircleOutlined />,
            content: '您确定要注销登录嘛',
            okText: '确认',
            cancelText: '取消',
            onOk: () => {
                message.success('注销登录成功', 1, () => {
                    //清空 sessionStorage
                    sessionStorage.clear()
                    this.props.history.push('/login')
                })
            }
        });
    }
}

export default Checklogin(Dashboard);
